<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 对象解构的变量名可以重新命名
        // 旧变量名: 新变量名
        // const obj = {
        //     name: '练练',
        //     age: 20
        // }
        // const { name: uname, age } = obj
        // console.log(name, uname, age)

        // const obj2 = {
        //     first: 'hello',
        //     last: 'world'
        // }
        // Q first last 解构：重命名为 f , l
        // const { first: f, last: l } = obj2
        // console.log(f, l)

        // 结论
        // 对象解构的内部机制
        // 1. 先找到同名的属性，再赋值给对应的变量
        // 2. 如果有冒号重命名的，被赋值的是冒号后面的那个变量名

        const pig = [{
            name: '佩奇',
            age: 6
        }]
        const [{ name: new_name, age: new_age }] = pig
        console.log(new_name, new_age)

        const goods = [{
            goodsName: '小米',
            price: 1999
        }]
        const [{ goodsName, price }] = goods
        console.log(goodsName, price)

    </script>
</body>

</html>